import React from 'react';
import { Download, Loader2, Image as ImageIcon } from 'lucide-react';
import type { GeneratedImage } from '../types';

interface ImageDisplayProps {
  image: GeneratedImage | null;
  isLoading: boolean;
}

export const ImageDisplay: React.FC<ImageDisplayProps> = ({ image, isLoading }) => {
  const handleDownload = () => {
    if (!image) return;
    
    const link = document.createElement('a');
    link.href = image.url;
    link.download = `mood-image-${image.timestamp}.jpg`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  if (isLoading) {
    return (
      <div className="image-display loading">
        <div className="loading-indicator">
          <Loader2 className="icon-spin" size={32} />
          <p>正在生成图片...</p>
          <small>这可能需要几秒钟时间</small>
        </div>
      </div>
    );
  }

  if (!image) {
    return (
      <div className="image-display empty">
        <ImageIcon size={48} className="empty-icon" />
        <p className="hint">情绪分析完成后，将为你生成专属图片</p>
      </div>
    );
  }

  return (
    <div className="image-display">
      <div className="image-container">
        <img 
          src={image.url} 
          alt="Generated mood image" 
          className="generated-image"
          onError={(e) => {
            const target = e.target as HTMLImageElement;
            target.style.display = 'none';
            target.nextElementSibling?.classList.remove('hidden');
          }}
        />
        <div className="image-error hidden">
          <ImageIcon size={32} />
          <p>图片加载失败</p>
        </div>
      </div>
      
      <div className="image-info">
        <div className="image-meta">
          <span className="meta-label">风格：</span>
          <span className="meta-value">{image.style}</span>
        </div>
        <div className="image-meta">
          <span className="meta-label">生成时间：</span>
          <span className="meta-value">
            {new Date(image.timestamp).toLocaleString('zh-CN')}
          </span>
        </div>
      </div>
      
      <div className="image-actions">
        <button 
          className="download-button"
          onClick={handleDownload}
          title="下载图片"
        >
          <Download size={16} />
          下载图片
        </button>
      </div>
      
      {image.prompt && (
        <details className="image-prompt">
          <summary>查看生成提示词</summary>
          <p className="prompt-text">{image.prompt}</p>
        </details>
      )}
    </div>
  );
};